<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom scanType="0" @clickLeftBack="handelSure" left-icon="left"
				:title="$t('navigationBar.warehouseSetting')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto warehouse-guiPage">
				<view class="warehouse-head">
					<view class="box-bg">
						<view class="input-view">
							<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
							<input confirm-type="search" class="nav-bar-input" type="text"
								:placeholder="$t('pageTranslation.plsInputKey')" v-model="data.warehouseName"
								@confirm="search" />
						</view>
						<view class="city" @click="search">
							{{ $t('distributedEnter.search') }}
						</view>
					</view>
				</view>
				<!-- 仓库 -->
				<view class="content-title warehouse-row">
					<view class="row-item">
						{{ $t('translationImage.serialNumber') }}
					</view>
					<view class="row-item">
						{{ $t('multilingual.coding') }}
					</view>
					<view class="row-item">
						{{ $t('multilingual.name') }}
					</view>
					<view class="row-item">
						{{ $t('multilingual.state') }}
					</view>
				</view>
				<scroll-view scroll-y="true" class="element-auto">
					<view v-for="(item, index) in data.list" :key="`${item.id}`" class="warehouse-row">
						<view class="row-item">
							{{ index + 1 }}
						</view>
						<view class="row-item">
							{{ item.warehouseCode }}
						</view>
						<view class="row-item">
							{{ item.warehouseName }}
						</view>
						<view class="row-item">
							<switch :checked="item.switchBool" @change="change($event, index)"
								style="transform:scale(0.7)" />
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
				<!-- 底部操作栏 -->
				<view class="page-bottom-box">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="handelSure">{{ $t('calendar.confirm')
						}}
					</view>
				</view>
				<uni-popup ref="alertDialog" type="center">
					<view class="input-dialog-box">
						<view class="input-dialog-content">
							<view class="input-dialog-item flexclass" style="padding:20rpx 0">
								<view style="font-size:32rpx">{{ $t("taskList.passwordRrequires") }}</view>
							</view>
							<view class="input-dialog-item flexclass" style="padding:20rpx 0">
								<view>{{ $t("login.password") }}：</view>
								<view class="input-dialog-item-count">
									<uni-easyinput v-model="data.passWord" type="password"
										:placeholder="$t('login.inputPassword')"></uni-easyinput>
								</view>
							</view>
						</view>
						<view class="input-dialog-footer">
							<view class="input-dialog-button " @click="cancelFn">
								{{ $t('calendar.cancel') }}
							</view>
							<view class="input-dialog-button dialog-button-left" @click="confirmFn">
								{{ $t('calendar.confirm') }}
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { reactive, computed, onMounted, ref } from 'vue';
import { DEFAULT_WAREHOUSECODE, DEFAULT_WAREHOUSENAME, DEFAULT_WAREHOUSEID } from '@/constant/index.js'
import { navigateBack } from '@/utils/routerSkip.js';
import { useStore } from "vuex";
import { getIsUsePageSetPDA } from '@/api/api.js'
import { getDataDictionaryFn } from '@/utils/index.js'
//引入国际化
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
let store = useStore();
let alertDialog = ref(null)

let data = reactive({
	list: [], //数据源
	noticeHooks: false, // 是否有数据标识
	warehouseName: '', // 搜索warehouseName
	passWordList: '',
	passWord: '',
	rowLi: {},
	indexs: null
})

onMounted(() => {
	getRequestData()
	passWord()
})

// 数据字典获取密码
const passWord = async () => {
	await getDataDictionaryFn('EditWarehouseForPwd').then(res => {
		if (res.code == 0) {
			data.passWordList = res.data
		}
	})

}

const change = (e, index) => {
	let { value } = e.detail

	data.rowLi = value
	data.indexs = index
	let defaultWarehouseCode = uni.getStorageSync(DEFAULT_WAREHOUSECODE) || '';

	if (defaultWarehouseCode) {
		alertDialog.value.open();
		data.passWord = ''
	} else {
		data.list.map((item, i) => {
			if (index == i) {
				item.switchBool = value // 当前选中
				uni.setStorageSync(DEFAULT_WAREHOUSECODE, value ? item.warehouseCode : '');
				uni.setStorageSync(DEFAULT_WAREHOUSENAME, value ? item.warehouseName : '');
				uni.setStorageSync(DEFAULT_WAREHOUSEID, value ? item.id + '' : '');
			} else {
				item.switchBool = false // 重置所有未选中状态
			}
		})
	}

}

// 弹框确定
const confirmFn = () => {
	console.log(data.passWordList[0].value)
	if (data.passWord == data.passWordList[0].value) {
		data.list.map((item, i) => {
			if (data.indexs == i) {
				item.switchBool = data.rowLi // 当前选中
				uni.setStorageSync(DEFAULT_WAREHOUSECODE, data.rowLi ? item.warehouseCode : '');
				uni.setStorageSync(DEFAULT_WAREHOUSENAME, data.rowLi ? item.warehouseName : '');
				uni.setStorageSync(DEFAULT_WAREHOUSEID, data.rowLi ? item.id + '' : '');
			} else {
				item.switchBool = false // 重置所有未选中状态
			}
		})

		alertDialog.value.close();
	} else {
		uni.showToast({
			title: t('taskList.passwordError'),
			icon: 'none',
			duration: 2000
		})
	}

}

const cancelFn = () => {
	data.list.map((item, i) => {
		if (data.indexs == i) {
			item.switchBool = false // 当前选中
		}
	})
	getRequestData()
	alertDialog.value.close();
	uni.navigateBack({
		delta: 1
	});
}

data.defaultWarehouseName = computed(() => {
	return store.state.defaultWarehouseName
})

// 查询初始化数据
const getRequestData = () => {
	let parmes = {
		warehouseName: '',
		warehouseCode: data.warehouseName,
		size: 20,
		current: 1
	}
	getIsUsePageSetPDA(parmes).then(res => {
		if (res.code == 0) {
			data.noticeHooks = false
			if (res.data.records.length == 0) {
				data.noticeHooks = true
			}
			let rows = res.data.records
			rows.map((item) => {
				item.switchBool = false
				// 设置默认仓库的选中状态
				let defaultWarehouseCode = uni.getStorageSync(DEFAULT_WAREHOUSECODE) || '';
				if (defaultWarehouseCode == item.warehouseCode) {
					item.switchBool = true
				}
			})
			console.log(rows)
			data.list = res.data.records
		}
	})
}
// 搜索
const search = () => {
	getRequestData()
}
// 确认
const handelSure = () => {
	let bool = data.list.some((item) => {
		return item.switchBool
	})
	if (!bool) {
		uni.showToast({ title: t('materials.pleaseSetTheDefault'), icon: "none" });
		return
	}
	navigateBack()
}
</script>

<style lang="scss" scoped>
.page-bottom-box {
	position: fixed;
	bottom: 0px;
}

.warehouse-guiPage {
	background: #fff;
}

.city {
	width: 120rpx;
	text-align: center;
}

.warehouse-head {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;

	.mini-btn {
		height: 64rpx;
	}
}

.box-bg {
	padding: 10rpx 30rpx;
	width: 690rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}

.input-uni-icon {
	line-height: 60rpx;
}

.nav-bar-input {
	height: 60rpx;
	line-height: 60rpx;
	width: 500rpx;
	padding: 0 5px;
	font-size: 12px;
	background-color: #f8f8f8;
}

.input-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 500rpx;
	flex: 1;
	background-color: #f8f8f8;
	height: 60rpx;
	border-radius: 15px;
	padding: 0 15px;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: 60rpx;
}

.warehouse-row {
	width: 100%;
	display: flex;

	.row-item {
		text-align: center;
		width: 25%;
		height: 60rpx;
	}
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}
</style>
